<template>
  <section class="cms-container">
    <aside class="cms-aside">
      <div class="cms-logo">
        <img
          class="logo"
          src="../assets/images/about_03.jpg" alt="">
      </div>
      <el-menu
        mode="vertical"
        class="cms-nav"
        :default-active="active_nav"
        :router="true"
      >
        <el-menu-item index="/cms/home">首页配置</el-menu-item>
        <el-menu-item index="/cms/apply">申请列表</el-menu-item>
        <el-menu-item index="/cms/article">资讯列表</el-menu-item>
        <el-menu-item index="/cms/appointment">预约列表</el-menu-item>
      </el-menu>
    </aside>
    <section class="cms-main">
      <header class="cms-header">
        <div class="cms_header-container">
          <div class="cms-user">
            <el-popover
              placement="bottom-end"
              trigger="hover"
              popper-class="cms_user-setting"
            >
              <el-menu
                mode="vertical"
                @select="handleSelect"
              >
                <el-menu-item index="logout">退出登录</el-menu-item>
              </el-menu>
              <el-button
                slot="reference"
                type="text"
              >
                {{user}}
                <i class="el-icon-setting"></i>
              </el-button>
            </el-popover>
          </div>
        </div>
      </header>
      <div class="cms-content">
        <nuxt/>
      </div>
      <copyright></copyright>
    </section>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-14
   * @Project: eabax
   */
  import copyright from '../components/copyright'

  export default {
    name: 'cms',
    data() {
      return {
        active_nav: this.getActiveNav(),
        user: ''
      }
    },
    watch: {
      $route: {
        deep: true,
        handler() {
          this.active_nav = this.getActiveNav()
          this.checkLoginStatus()
        }
      }
    },
    mounted() {
      this.user = sessionStorage.getItem('username')
      this.checkLoginStatus()
    },
    methods: {
      checkLoginStatus() {
        if (!this.user) {
          this.$message({
            message: '请先登录',
            type: 'error'
          })
          this.$router.replace({
            path: '/login'
          })
        }
      },
      getActiveNav() {
        let path = this.$route.path,
          first_path = path.split('/')[2]
        return '/cms/' + first_path
      },
      handleSelect() {
        this.$confirm('确认退出登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios
            .$get('/api/v1/token/login/out')
            .then(res => {
              sessionStorage.clear()
              this.$router.push({
                path: '/login'
              })
            })
        }).catch(() => {
        })
      }
    },
    components: {
      copyright
    }
  }
</script>

<style lang="less">
  @asideWidth: 240px !important;
  @headerHeight: 50px !important;
  .cms-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;

    .cms-aside {
      flex-shrink: 0;
      flex-grow: 0;
      width: @asideWidth; /* no */
      height: 100%;
      overflow: auto;
      background-color: #222;
      display: flex;
      flex-direction: column;

      .cms-logo {
        width: 100%;
        height: @headerHeight; /* no */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        color: #ffffff;
        background-color: #fff;

        .logo {
          max-width: 80%;
          max-height: 80%;
        }
      }

      .cms-nav {
        background-color: #222;
        padding: 24px 0 0;
        border: none;

        .el-menu-item {
          color: #666666;

          &.is-active, &:hover {
            background-color: #409EFF;
            color: #ffffff;
          }
        }
      }
    }

    .cms-main {
      width: 100%;
      height: 100%;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }

    .cms-header {
      flex-grow: 0;
      flex-shrink: 0;
      width: 100%;
      height: @headerHeight; /* no */
      overflow: hidden;
      border-bottom: 1px solid #ececec;
      box-sizing: border-box;
    }

    .cms_header-container {
      position: fixed;
      top: 0;
      left: @asideWidth; /* no */
      right: 0;
      height: @headerHeight; /* no */
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 24px;
      box-sizing: border-box;
      background-color: #fff;
    }

    .cms-user {
      flex-grow: 1;
      flex-shrink: 1;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 18px;
    }

    .cms-content {
      flex-grow: 1;
      flex-shrink: 1;
      padding: 24px 24px 0;
      background-color: #f1f2f3;
    }

    .copyright {
      background-color: #f1f2f3;
      text-align: center;
      line-height: 40px; /* no */
      color: #666;

      a {
        color: #666;

        &:hover {
          color: #222;
        }
      }
    }

    .cms-page {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 4px;
      padding: 24px 20px;

      .cms-title {
        font-size: 28px;
        margin: 0;
        padding-bottom: 24px;
      }

      .cms-pagination {
        padding: 20px 0;
        text-align: right;
      }
    }
  }

  .cms_user-setting {
    padding: 16px 0;
    width: 100px; /* no */
  }

  .avatar-column {
    position: relative;

    .cell {
      width: 100%;
      height: 100%;
    }

    .table-avatar {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .cms-form {
    .el-form-item {
      max-width: 600px;
    }

    .cms-editor {
      max-width: 1000px;
    }

  }
</style>
